<template>

  <div class="sessions">
    <div class="headers">
      <div class="indexHeader">
        <!-- 搜索区域 -->
        <div class="logo">
          <img src="@/assets/logo.png" alt="" srcset="">
        </div>
        <div class="search" @click="$router.push('/search')">
          <van-icon class="iconfont" name="search" />
          <span class="text">搜索商品, 共144403款好物</span>
        </div>
        <!-- 登录按钮 -->
        <div class="loginBtn" @click="$router.push('/login')" v-if="!token">
          登录
        </div>
      </div>
      <!-- navList -->
      <div class="navList" v-show="isDialog">
        <van-tabs class="tabs" color="#ec3030" @click-tab="changeNav" title-active-color="#ec3030" line-height="1px" >
          <van-tab title="推荐" class="van-tab--active"   ></van-tab>
          <van-tab  v-for="(nav,index) in navList" :name="nav.id"  :title="nav.name" :key="nav.id">
          </van-tab>
        </van-tabs>
      </div>
      <!-- 遮罩层 -->
      <div class="right_shadow">
          <div class="left"></div>
          
          <div class="right" @click="isShowDraw">
            <van-icon v-if="isDialog" name="arrow-down" size="30" color="#ccc" />

            <van-icon v-else name="arrow-up" size="30" color="#ccc">
              
            </van-icon>
          </div>
      </div>
      
      <div v-show="!isDialog" class="dialog">
        <div class="dialogHeader">
          <div class="dialogLeft">全部频道</div>
        </div>
        <div class="dialogbd" >
          <div class="dialogItem" @click="toItemPage(0)" :class="{active:indexOf===0}">
            推荐
          </div>
          <div class="dialogItem" :name="nav.id" @click="toItemPage(index+1)" :class="{active:(index+1)===indexOf}"  v-for="(nav,index) in navList" :key="nav.id">
            {{nav.name}}
          </div>
        </div>
        <div class="bgShadow"></div>
      </div>
      
    </div>
    <div class="session" v-if="indexOf === 0" >
    
      <!-- swiper -->
      <van-swipe class="my-swipe" :autoplay="10000" indicator-color="white">
        <van-swipe-item class="swipe-item" v-for="(focus,index) in focusList" :key="index">
          <img class="focusImg" :src="focus.picUrl" alt="">
        </van-swipe-item>

      </van-swipe>

      <!-- 图标区 -->
      <div class="icon">
        <div class="iconItem" v-for="(policy,index) in iconList" :key="policy.desc" >
          <img class="iconImg" :src="policy.icon" mode="" />
          <span class="iconText">{{policy.desc}}</span>
        </div>
      </div>

      <!-- 品牌区 -->
      <div class="category" >
        <div class="categoryItem" v-for="(kingKong,index) in kingKongLists" :key="kingKong.text">
          <img class="categoryImg" :src="kingKong.picUrl" alt="">
          <div class="categoryText">
            {{kingKong.text}}
          </div>
        </div>
      </div>

      <!-- 热销新人区 -->
      <div class="hotNew">
        <!-- 热销区 -->
        <div class="hot">
          
          <div class="hotItem1">
            <div class="img">
              <img class="hotImg" src="https://yanxuan-item.nosdn.127.net/54a2767366cbd6f367ef0352ff5c072a.png" alt="">
            </div>
          </div>
          <div class="hotItem2">
            <div class="img">
              <img class="hotImg" src="https://yanxuan-item.nosdn.127.net/85918b3f3b7dc4525c0a160d6f7fa650.png" alt="">
            </div>
          </div>
          <div class="hotItem3">
            <div class="img">
              <img class="hotImg" src="https://yanxuan-item.nosdn.127.net/9a33f08a3b0f5c06fdf4c586d51b2f7c.png" alt="">
            </div>
          </div>
        </div>
        <!-- 红包 -->
        <div class="redpackage">
          <div class="up">
            <div class="Img">
              <van-swipe class="my-swipe" :autoplay="10000" indicator-color="white">
                <van-swipe-item  v-for="(focus,index) in bigPromo" :key="focus.id">
                  <img class="upImg" :src="focus.picUrl" alt="">
                </van-swipe-item>
              </van-swipe>
            </div>
          </div>

        </div>
      </div>

      <!-- 新人专区 -->
      <div class="xinren">
        <div class="header">
          - 新人专享礼 -
        </div>
        <div class="mainContainer">
          <div class="left">
            <div class="title">新人专享礼包</div>
            <div class="Img">
              <img class="leftImg" src="https://yanxuan.nosdn.127.net/static-union/1648017994dd2933.png" alt="">
            </div>
          </div>
          <div class="right">
           
            <div class="top" v-for="(item,index) in indexActivity" :key="item.title">
              <div class="itemImg">
                <img class="topImg" :src="item.showPicUrl" alt="">
                <div class="price">
                  <div class="p1">{{item.activityPrice}}</div>
                  <del class="p2" v-if="index===0">{{ index===0 ? item.originPrice:item.originPrice }}</del>
                  <!-- <del v-else class="p2">{{item.originPrice}}</del> -->
                </div>
              </div>
              <div class="topText">
                <p class="fu">{{item.title}}</p>
                <p class="te">{{item.subTitle}}</p>
              </div>
              
            </div>
            <!-- <div class="bottom">
              <div class="itemImg">
                <img class="topImg" :src="indexActivity[1].showPicUrl" alt="">
                <div class="price">
                  <div class="p1">{{indexActivity[1].activityPrice}}</div>
                  <del class="p2">{{indexActivity[1].originPrice}}</del>
                </div>
              </div>
              <div class="topText">
                <p class="fu">{{indexActivity[1].title}}</p>
                <p class="te">{{indexActivity[1].tag}}</p>
              </div>
            </div> -->
          </div>
        </div>

      </div>

      <!-- 类目热销 -->
      <div class="hotcategory">
        <div class="title">
         {{categoryHot?.title}}
        </div>
        <!-- toubu -->
        
        
          <div class="header">
            <div class="ItemLeft" v-for="(ti,index) in title" :key="ti.categoryName">
              <span class="itemTitle">{{ti.categoryName}}</span>
              <div class="Img">
                <img :src="ti.picUrl" alt="">
              </div>
            </div>

            <!-- <div class="ItemRight">
              <span class="itemTitle">美食酒水榜</span>
              <div class="Img">
                <img src="../../assets/1.jpg" alt="">
              </div>
            </div> -->
            
          </div>
          <!-- main -->
          <div class="main" >
            <div class="mainItem" v-for="(item,index) in category" :key="item.categoryName">
              <div class="maintext">{{item.categoryName}}</div>
              <div class="mainImg">
                <img class="Img" :src="item.picUrl" alt="">
              </div>
            </div>
          </div>

      </div>

      <!-- 底部 -->
      <div class="footer">
        <div class="leftItem" v-for="(scene,index) in sceneLights" :key="index">
          <!-- {{ scene }} -->
          <div class="itemTitle">{{scene.styleItem?.title}}</div>
          <div class="itemPrice">{{scene.styleItem?.desc}}</div>
          <div class="itemContainer">
            <div class="left" v-for="(pic,index) in scene.styleItem?.picUrlList" :key="index">
              <img class="Img" :src="pic" alt="">
            </div>
            <!-- <div class="right">
              <img class="Img" :src="scene.picUrl[1]" alt="">
            </div> -->
          </div>
        </div>
        <div class="leftItem" v-for="(scene,index) in sceneLight1" :key="index">
          <!-- {{ scene }} -->
          <div class="itemTitle">{{scene.styleItem?.title}}</div>
          <div class="itemPrice">{{scene.styleItem?.desc}}</div>
          <div class="itemContainer">
            <div class="left" v-for="(pic,index) in scene.styleItem?.picUrlList" :key="index">
              <img class="Img" :src="pic" alt="">
            </div>
            <!-- <div class="right">
              <img class="Img" :src="scene.picUrl[1]" alt="">
            </div> -->
          </div>
        </div>
      </div>

      <!-- 最下面 -->
      <div class="bottom">
        <div class="bdbtn">
          <div class="left">下载App</div>
          <div class="right">电脑端</div>
        </div>
        <div class="copyright">
          <p>网易公司版权所有 © 1997-2023 <br/>食品经营许可证：JY13301080111719</p>
        </div>
        
      </div>
      <div class="empty">

      </div>
    </div>

    
    <Live v-else></Live>

  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
import { storeToRefs } from 'pinia';

  export default defineComponent({
    name:'IndexList'
  })
</script>
<script lang="ts" setup>
import {ref,onMounted, toRefs} from 'vue'
import Live from './Live/index.vue'
import { useIndexStore } from '@/stores/index';
import {useLiveStore} from '@/stores/homelive'

const indexStore = useIndexStore()

const {getIndexData} = useIndexStore()

const liveStore = useLiveStore()
const {getInitData} = useLiveStore()


// const isShow = ref(true)
const indexOf = ref<number>(0)

const isDialog = ref(true)


// 点击是否显示下拉框
const isShowDraw = () => {
  isDialog.value = !isDialog.value

}
// tab栏切换
const changeNav = (name:any,) => {
  indexOf.value = name.name
  getInitData(name.name)
}
const ids = ref<number>(1005000)
// 点解跳转到某个页面
const toItemPage = (num:number) =>{
  indexOf.value = num
  isDialog.value = !isDialog.value
  
}
const token = ref('')
token.value = localStorage.getItem('token_key') as string
// 获取首页数据
onMounted(()=>{
  getInitData(ids.value)
  getIndexData()
})

const {focusList,iconList,kingKongLists,bigPromo,
  indexActivity,categoryHot,
  categoryList,title,category,sceneLights,
  sceneLight1
} =  storeToRefs(indexStore)



// // 获取居家生活页数据
const {navList} = storeToRefs(liveStore)


</script>

<style lang="less" scoped>
 
.sessions{
  overflow: hidden;
  .headers{
    position: fixed;
    top: 0px;
    z-index: 1;
    height: 74px;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    border-bottom: 2px solid #b5babd;

    .indexHeader{
    padding: 8px 15px;
    display: flex;
    align-items: center;
    .logo{
      width: 69px;
      height: 20px;
      line-height: 20px;
      margin-right: 10px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .search{
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 28px;
      font-size: 14px;
      line-height: 28px;
      background-color: #ededed;
      .iconfont{
        width: 14px;
        height: 14px;
        margin-right: 5px;
        font-size: 14px;
      }
    }
    .loginBtn{
      width: 37px;
      height: 20px;
      margin-left: 8px;
      font-size: 12px;
      box-sizing: border-box;
      color: #f23636;
      border: 1px solid #f23636;
      border-radius: 4px;
      text-align: center;
      line-height: 20px;
    }

    }
    .navList{
        border-bottom: 1px solid #bdb8b8;
        height: 30px;
        box-sizing: border-box;
        // van-tabs__nav--line
        :deep(.van-tabs__nav){
          height: 30px;
        }
        :deep(.van-tab--active){
          border-bottom: 1px solid #ed4646;
          }
        :deep(.van-tabs__line){
          width: 0;
        }
    }
    .right_shadow{
      position: absolute;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 999;
      right: 0;
      bottom: 0px;
      width: 80px;
      height: 30px;
      // background-color: #50f134;
      font-size: 12px;
      .left{
        width: 30px;
        height: 30px;
        background-image: linear-gradient(90deg,hsla(0,0%,100%,0) 0,#fff);
      }
      .right{
        width: 50px;
        height: 30px;
        background: #fff;
        line-height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .dialog{
      position: fixed;
      top: 44px;
      left: 0;
      height: 186px;
      width: 100%;
      box-sizing: border-box;
      
      background-color: #fff;
      .dialogHeader{
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        padding: 0 15px;
        height: 30px;
        line-height: 30px;
      }
      .dialogbd{
        padding: 0 15px;
        padding-top: 12px;
        display: flex;
        justify-content: space-between;
        // flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        .dialogItem{
          margin-bottom: 20px;
          width: 75px;
          height: 28px;
          border: 1px solid #ccc;
          background-color: #FAFAFA;
          box-sizing: border-box;
          text-align: center;
          line-height: 28px;
          font-size: 14px;
          &.active{
            border: 1px solid #f43535;
            color: #f43535;
          }
        }
      
        &::after{
          content: "";
          display: block;
          width: 165px;
          // width: 75px;
        }

      }
      .bgShadow{
        width: 100%;
        height: calc(100vh - 230.5px);
        background-color: rgba(0,0,0,.5);
      }


    }
  }
  
  .session{
    margin-top: 76px;
    .my-swipe {
      height: 150px;
      // box-sizing: border-box;
      :deep(.swipe-item) {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        height: 100%;
        text-align: center;  
      }
      :deep(.focusImg){
        height: 100%;
        width: 100%;
      }
      :deep(.van-swipe__indicator){
        width: 25px;
        height: 2px;
        border-radius: 0;
      }
    }
    .icon{
      display: flex;
      justify-content: space-around;
      padding: 0 15px;
      height: 36px;
      line-height: 36px;
      .iconItem{
        .iconImg{
          width: 16px;
          height: 16px;
        }
        .iconText{
          font-size: 12px;
          margin-left:4px;
        }

      }
    }

    .category{
      display: flex;
      flex-wrap: wrap;
      .categoryItem{
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 6px;
        .categoryImg{
          width: 55px;
          height: 55px;
        }
        .categoryText{
          margin-top: 5px;
          font-size: 12px;
        }
      }
    }

    .hotNew{
      .hot{
        margin-bottom: 10px;
        padding: 10px 6px 0;
        display: flex;
        justify-content: space-around;
        .hotItem1,.hotItem2,.hotItem3{
          background-image: url("https://yanxuan.nosdn.127.net/static-union/168059878811730c.png");
          background-size: 100% 100%;
          height: 110px;
          width: 115.5px;
          box-sizing: border-box;
          border-radius: 10px;
          // border: 1px solid #000;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: flex-end;
          .img{
            // border: 1px solid #000;
            .hotImg{
              width: 70px;
              height: 70px;
            }
          }
          
        }
        .hotItem2{
          background-image: url("https://yanxuan.nosdn.127.net/static-union/16805987434a5424.png");
        }
        .hotItem3{
          background-image:url("https://yanxuan.nosdn.127.net/static-union/1680598965bf99ac.png")
        }
      }
      .redpackage{
        padding: 0 8px;
        // border-radius: 16px;
          .up{
            position: relative;
            left: 0;
            background: url('https://yanxuan.nosdn.127.net/static-union/168059808822a8e6.gif')  no-repeat;
            width: 100%;
            height: 106.66px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            background-size: 100% 106.66px;
           
            .Img{
              position: absolute;
              top: 14px;
              left: 40px;
              width: 84px;
              height: 84px;
              :deep(.van-swipe-item){
                width: 100%;
                height: 100%;
              }
              :deep(.upImg){
                width: 84px;
                height: 84px;
              }
            }
          }
          .down{
            height: 66.66px; 
            background:rgb(237, 162, 57);
            // border: 1px sloid #000;
          }
      }
    }
    .xinren{

      margin-top: 10px;
      padding: 15px;
      .header{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        text-align: center;
        color:#000
      }
      .mainContainer{
        margin-top: 20px;
        display: flex;
        justify-content: space-around;
        height: 217px;
        .left{
          width: 171px;
          margin-right: 2px;
          box-sizing: border-box;
          font-size: 16px;
          background-color: #FDE8CF;
          .title{
            padding: 15px 0 0 15px;
          }
          .Img{
            width: 129px;
            height: 129px;
            margin: auto;
            .leftImg{
              width: 100%;
              height: 100%;
            }
            
          }
        }
        .right{
          // position: relative;
          width: 171px;
          .top{
            position: relative;
            height: 107.5px;
            box-sizing: border-box;
            background-color: #FFE1D2;
            border-radius:6px;
            margin-bottom: 4px;
            box-sizing: border-box;
            .topText{
              padding: 10px 0 0 15px;
              flex-direction: column;
              .fu{
                // width: 70px;
                height: 24px;
                line-height: 24px;
                font-size: 18px;
              }
              .te{
                width: 70px;
                height: 18px;
                line-height: 18px;
                font-size: 12px;
              }
            }
            .itemImg{
              position: absolute;
              right: 0;
              top: 0;
              width: 100px;
              height: 100px;
              float: right;
              margin-top: 10px;
              .topImg{
                width: 100%;
                height: 100%;
              }
              .price{
                position: absolute;
                width: 40px;
                height: 40px;
                box-sizing: border-box;
                border-radius: 50%;
                background: #f59524;
                top: 0;
                right: 0;
                font-size: 10px;
                color:#fff;
                .p1{
                  padding-top: 6px;
                  text-align: center;
                  margin-bottom: 6px;
                  width: 40px;
                  height: 10px;
                }
                .p2{
                  display: block;
                  text-align: center;
                  width: 40px;
                  height: 10px;
                  line-height: 10px;
                }
              }
            }
          }
          .bottom{
            position: relative;
            height: 107.5px;
            box-sizing: border-box;
            background-color: #FFEBC2;
            border-radius:6px;
            box-sizing: border-box;
            .topText{
              // padding: 10px 0 0 15px;
              flex-direction: column;
              .fu{
                // width: 70px;
                height: 24px;
                line-height: 24px;
                font-size: 18px;
              }
              .te{
                width: 70px;
                height: 18px;
                line-height: 18px;
                font-size: 12px;
                color:#fff;
                background-color: #D1B593;
              }
            }
            .itemImg{
              position: absolute;
              right: 0;
              top: 0;
              width: 100px;
              height: 100px;
              float: right;
              margin-top: 10px;
              .topImg{
                width: 100%;
                height: 100%;
              }
              .price{
                position: absolute;
                width: 40px;
                height: 40px;
                box-sizing: border-box;
                border-radius: 50%;
                background: #f59524;
                top: 0;
                right: 0;
                font-size: 10px;
                color:#fff;
                .p1{
                  padding-top: 6px;
                  width: 40px;
                  height: 10px;
                  text-align: center;
                }
                .p2{
                  display: block;
                  width: 40px;
                  height: 10px;
                  text-align: center;

                }
            }
          }
          }
        }
      }
    }
    .hotcategory{
      margin-top:10px;
      padding:0 15px;

      .title{
        height: 50px;
        line-height:50px;
        font-size:16px;
      }
      .header{
        display: flex;
        justify-content: space-between;
        position: relative;
        .ItemLeft{
          position: relative;
          width: 170px;
          height: 100px;
          margin: 0 5px 5px 0;
          background-color: #FBF3E4;
          box-sizing: border-box;
          padding-left: 10px;
          .itemTitle{
            font-size:16px;
            &::after{
              content:'';
              display: block;
              width: 24px;
              height:2px;
              background-color: #000;
            }
          }
          .Img{
            position: absolute;
            right: 0;
            bottom: 0;
            width: 100px;
            height: 100px;
            img{
              width: 100%;
              height: 100%;
            }
          }
        
        }
        .ItemRight{
          position: relative;
          width: 170px;
          height: 100px;
          margin: 0 5px 5px 0;
          background-color: #EAEFF6;
          box-sizing: border-box;
          padding-left: 10px;
          .itemTitle{
            font-size:16px;
            &::after{
              content:'';
              display: block;
              width: 24px;
              height:2px;
              background-color: #000;
            }
          }
          .Img{
            position: absolute;
            right: 0;
            bottom: 0;
            width: 100px;
            height: 100px;
            img{
              width: 100%;
              height: 100%;
            }
          }
        
        }
      }
      .main{
        display: flex;
        flex-wrap: wrap; 
        width: 370px;
        overflow: hidden;
        .mainItem{
          margin: 0 5px 5px 0;
          display: flex;
          height: 90px;
          width:82.5px;
          box-sizing: border-box;
          flex-direction: column;
          align-items: center;
          background-color: #e3dede;
          .maintext{
            margin-top: 5px;
            font-size:12px;
          }
          .mainImg{
            width: 60px;
            height: 60px;
            .Img{
              width: 100%;
              height: 100%;
            }

          }
        }
      }
    }

    .footer{
      display: flex;
      margin-top: 20px;
      // border: 1px solid #aaa;
      padding: 15px;
      justify-content: space-between;
      .leftItem{
        height: 142px;
        width: 181px;
        margin-right: 2px;
        box-sizing: border-box;
        padding: 10px 0 0 10px;
        background-color: #F5F5F5;
        .itemTitle{
          font-size:18px;

        }
        .itemPrice{
          font-size:12px;
          color:#ed4646;
        }
        .itemContainer{
          display: flex;
          .left{
            width: 75px;
            height: 75px;
            margin-right: 2px;
            .Img{
              width: 100%;
              height: 100%;
            }
          }
          .right{
            width: 75px;
            height: 75px;
            margin-right: 2px;
            .Img{
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }

    .bottom{
      height: 122px;
      background-color: #414141;
      box-sizing: border-box;
      padding: 27px 10px 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .bdbtn{
        display: flex;
        justify-content: center;
        align-items: center;
        .left,.right{
          width: 86px;
          height: 31px;
          box-sizing: border-box;
          border-radius: 4px;
          border: 1px solid #ccc;
          color:#fff;
          text-align: center;
          margin-right: 25px;
          line-height: 31px;
          font-size: 12px;
        }
        


      }
      .copyright{
        font-size: 12px;
        text-align: center;
        line-height: 16px;
        color: #d8d0c6;
      }
    }
    .empty{
      height: 40px;
      background-color: #fff;
    }
  }
}

</style>


